<template>
	<view>
		<view class="top-box">
			<view class="logo-box">
				<image src="../../static/images/index/logo.png" mode=""></image>
				<view>明日方舟</view>
			</view>
			<view class="search-box">
				<image src="../../static/images/index/search.svg" mode=""></image>
			</view>
		</view>
		<view class="content">
			<view class="channel-box">
				<view class="channel" style="border-bottom: 5rpx solid #83d11b;color: #000;">
					<view>推荐</view>
				</view>
				<view class="channel">
					<view>论坛</view>
				</view>
				<view class="channel">
					<view>攻略</view>
				</view>
				<view class="channel">
					<view>同人</view>
				</view>
				<view class="channel">
					<view>探索泰拉</view>
				</view>
				<view class="channel">
					<view>官方</view>
				</view>
			</view>
			<view class="swiper-box">
				<swiper class="swiper" circular autoplay :indicator-dots="true"
				indicator-color="#ccc" indicator-active-color="#83d11b" interval="5000" :duration="3000">
					<swiper-item>
						<image :src="swiperImgs[0]" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image :src="swiperImgs[1]" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image :src="swiperImgs[2]" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="notice-box">
					<view class="notice">
						<view class="notice-message">
							<view class="message-left">置顶</view>
							<view class="message-right">森辉岛明日方舟分区版规</view>
						</view>
						<view class="notice-to">
							<image src="../../static/images/user/to.png" mode=""></image>
						</view>
					</view>
					<view class="notice">
						<view class="notice-message">
							<view class="message-left">置顶</view>
							<view class="message-right">10月签到福利即将开启！</view>
						</view>
						<view class="notice-to">
							<image src="../../static/images/user/to.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 帖子列表 -->
		<view class="post-list">
			<!-- 帖子 -->
			<view class="post-box" v-for="(item,index) in postList" @click="()=>toPost(item.id)">
				<!-- 用户信息 -->
				<view class="user-box">
					<view class="user-info">
						<image :src="item.avatarPath" ></image>
						<view>
							<view class="nickname">
								{{item.nickname}}
							</view>
							<view class="updatetime">
								发布于 {{getFormatTime(item.createTime)}}
							</view>
						</view>
					</view>
				</view>
				<view class="post">
					<!-- 帖子缩略图 -->
					<image v-if="item.image != ''" :src="imageList[index]" mode="heightFix"></image>
					<!-- 帖子标题 -->
					<view class="post-title">{{item.title}}</view>
					<view class="post-content">{{item.content}}</view>
				</view>
				<!-- 帖子数据 -->
				<view class="data">
					<view class="data-left">
						<view class="image-box">
							<image src="../../static/images/icons/watch.png"></image>
							<view>{{item.watchCount}}</view>
						</view>
					</view>
					<view class="data-right">
						<view class="image-box">
							<image src="../../static/images/icons/remark.png"></image>
							<view>{{item.remarkCount}}</view>
						</view>
						<view class="image-box">
							<image src="../../static/images/icons/like.png"></image>
							<view>{{item.likeCount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" @click="toWirtePost">
			<image src="../../static/images/icons/write.svg" mode="" ></image>
		</view>
		
	</view>
</template>

<script>
	import {PostList} from "../../static/js/Post.js"
	import {ConcernList,addConcern,delConcern} from "../../static/js/Concern.js"
	import {baseUrl} from "../../static/js/config.js"
	export default {
		data() {
			return {
				postList:[],
				// 轮播图数据
				swiperImgs:[
					"../../static/images/index/lb1.png",
					"../../static/images/index/lb2.png",
					"../../static/images/index/lb3.png"
				],
				imageList:[],
				queryForm:{
					"pageNum":1,
					"pageSize":4,
					"orderByColumn":'id',
					"status":1,
				},
				userInfo:{}
			}
		},
		onLoad(){
			this.userInfo = uni.getStorageSync("userInfo")
			let token = uni.getStorageSync("login-token")
			if(token == ""){
				uni.redirectTo({
					url:"/pages/login/login"
				})
			}
			this.getList()
		},
		onPullDownRefresh(){
			this.queryForm={
				"pageNum":1,
				"pageSize":3,
				"orderByColumn":'id',
				"status":1,
			}
			this.postList = []
			this.imageList = []
			this.getList()
			
		},
		async onReachBottom() {
			this.queryForm.pageNum += 1 
			this.getList()
		},
		methods: {
			toWirtePost(){
				uni.navigateTo({
					url:"/pages/post/writePost"
				})
			},
			getList(){
				PostList(this.queryForm).then(res=>{
					this.postList = this.postList.concat(res.data.records)
					var image = ""
					for(var i=0;i < res.data.records.length;i++){
						image = JSON.parse(res.data.records[i].image)
						this.imageList.push(baseUrl+'/image/posts/'+image.userId+'/'+image.postCount+'/0.png')
					}
					uni.stopPullDownRefresh()
				})
			},
			appendConcern(id){
				var data = {concernUserId:id}
				data.userId = this.userInfo.id
				addConcern(data).then(res=>{
					uni.showToast({
						icon:"none",
						title:"关注成功",
						duration:500,
						position:"bottom"
					})
				})
			},
			cancelConcern(id){
				delConcern(id).then(res=>{
					uni.showToast({
						icon:"none",
						title:"取消关注",
						duration:500,
						position:"bottom"
					})
				})
			},
			getFormatTime(datetime){
				if(datetime){
					var dt = new Date(datetime);
					let year = dt.getFullYear();
					let month = (dt.getMonth() + 1).toString().padStart(2,'0');
					let date = dt.getDate().toString().padStart(2,'0');
					let hour = dt.getHours().toString().padStart(2,'0');
					let minute = dt.getMinutes().toString().padStart(2,'0');
					let second = dt.getSeconds().toString().padStart(2,'0');
					return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
				}
			},
			toPost(id){
				uni.navigateTo({
					url:"/pages/post/post?id=" + id
				})
			}
			
		}
	}
</script>

<style>
	@import url("../../static/css/base.css");
	page{
		background-color: #efefef;
	}
	.top-box{
		padding-top: 100rpx;
		padding-bottom: 20rpx;
		background-image: url("../../static/images/index/index01.jpg");
		background-size: cover;
		display: flex;
		justify-content: space-between;	
	}
	.logo-box{
		margin: 0 20rpx;
		display: inline-flex;
	}
	.logo-box image{
		height: 100rpx;
		width: 100rpx;
	}
	.logo-box view{
		line-height: 100rpx;
		color: #fff;
		margin-left: 20rpx;
	}
	.search-box{
		line-height: 100rpx;
		margin: 0 20rpx;
	}
	.search-box image{
		width: 48rpx;
		height: 48rpx;
	}
	.content{
		margin: 20rpx;
	}
	.channel-box{
		display: inline-flex;
		justify-content: space-around;
		padding-bottom: 20rpx;
	}
	.channel-box .channel{
		margin: 0 20rpx;
		padding-bottom: 10rpx;
		color: gray;
	}
	.swiper-box{
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.swiper{
		height: 160rpx;
	}
	.swiper image{
		margin: 0;
		padding: 0;
		height: 160rpx;
		width: 100%;
		border-radius: 20rpx;
	}
	.notice-box{
		margin-top: 10rpx;
	}
	.notice{
		padding-top: 10rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		
	}
	.notice-message{
		display: inline-flex;
		font-size: 24rpx;
		font-weight: 800;
	}
	.message-left{
		color: #83d11b;
		border: 5rpx solid #83d11b;
		padding: 2rpx 10rpx;
		border-radius: 10rpx;
	}
	.message-right{
		padding-left: 15rpx;
		padding-top: 7rpx;
	}
	.notice-to{
		padding-top: 7rpx;
	}
	.notice-to image{
		height: 24rpx;
		width: 24rpx;
	}
	.post-list{
		margin: 10rpx 20rpx;
		padding-bottom: 20rpx;
	}
	.post-box{
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		z-index: 50;
	}
	.user-box{
		display: flex;
		justify-content: space-between;
	}
	.user-info{
		display: flex;
	}
	.user-info image{
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
	}
	.user-info > view{
		margin-left: 20rpx;
	}
	.user-info .nickname{
		display: flex;
		align-items: center;
		margin-top: 13rpx;
		font-size: 26rpx;
		font-weight: bold;
	}
	.user-info .updatetime{
		margin-top: 7rpx;
		font-size: 24rpx;
		color: gray;
	}
	.concern{
		position: relative;
		margin-top: 30rpx;
		z-index: 100;
	}
	.concern button{
		background-color: rgba(131, 209, 27, 0.2);
		color: #83d11b;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 10rpx 20rpx;
	}
	.post{
		margin-top: 20rpx;
	}
	.post image{
		height: 300rpx;
		border-radius: 20rpx;
	}
	.post .post-title{
		margin: 20rpx 0;
		font-weight: bolder;
		font-size: 32rpx;
	}
	.post .post-content{
		color: gray;
		font-size: 28rpx;
		overflow: hidden;      
		word-break: break-all; 
		text-overflow: ellipsis; 
		display: -webkit-box;
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2; 
	}
	.data{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.data-right{
		display: flex;
	}
	.image-box{
		display: inline-flex;
		color: gray;
		width: 100rpx;
	}
	.image-box image{
		height: 30rpx;
		width: 30rpx;
	}
	.image-box view{
		margin-left: 10rpx;
		line-height: 30rpx;
		font-size: 24rpx;
	}
</style>
